import React, { Component } from 'react';
import FontIcon from 'material-ui/FontIcon';
import {BottomNavigation, BottomNavigationItem} from 'material-ui/BottomNavigation';
import Paper from 'material-ui/Paper';
import IconLocationOn from 'material-ui/svg-icons/communication/location-on';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
// import Icon from 'react-fontawesome'


import '../index.scss';

const msgIcon = <FontIcon className="material-icons" style={{marginBottom:5}}>message</FontIcon>;
const contactsIcon = <FontIcon className="material-icons" style={{marginBottom:5}}>contacts</FontIcon>;
const exploreIcon = <FontIcon className="material-icons" style={{marginBottom:5}}>explore</FontIcon>;


export default class FooterNavigationBar extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
      selectedIndex: 0,
    };

    this.select = index => this.setState({
      selectedIndex: index
    });
  }

   render() {
    return (
        <Paper zDepth={1} className={`footer-navbar`}>
          <BottomNavigation selectedIndex={this.state.selectedIndex}>
            <BottomNavigationItem
              label="消息"
              icon={msgIcon}
              onTouchTap={() => this.select(0)}
            />
            <BottomNavigationItem
              label="联系人"
              icon={contactsIcon}
              onTouchTap={() => this.select(1)}
            />
            <BottomNavigationItem
              label="动态"
              icon={exploreIcon}
              onTouchTap={() => this.select(2)}
            />
          </BottomNavigation>
        </Paper>
    );
  }
}